import React, {Component} from 'react';
import {Flex} from 'antd-mobile';
import './HomeHotType.scss'
import {Link} from "react-router-dom";
import Nav from "../../../assets/images/nav-1.png";
import http from "../../../util/http";

class HomeHotType extends Component {
    constructor(props) {
        super(props);
        // 初始化热门种类数据
        this.state = {
            HotTypeList: []
        }
    }
    componentDidMount() {
        // 获取热门种类数据
        http.get('api/type/hot/8').then(({data}) => {
            if (data.code === 200) {
                const HotTypeList = data.data.list
                this.setState({
                    HotTypeList: HotTypeList.map((item,index) => {
                        return {
                            id: item.typeId,
                            img:Nav,
                            title: item.typeName,
                            path:index
                        }
                    }),
                })
            }
        })
    }
    // state:{typeId:item.id,initialPage:item.path}
    // 渲染热门种类菜单
    renderHotTypes() {
        return this.state.HotTypeList.map((item) => (
            <div  className={"inline"} key={item.id} >
                <Link to={{pathname:"/movie",state:{typeId:item.id,initialPage:item.path}}}   >
                    <img src={item.img} alt=""/>
                    <h2>{item.title}</h2>
                </Link>
            </div>
        ))
    }
    render() {
        return (
            <div className="home-hottpye">
                <Flex wrap="wrap">
                    {this.renderHotTypes()}
                </Flex>
            </div>
        );
    }
}

export default HomeHotType;
